import { Component, Host, Input, Optional } from '@angular/core';
import { FlowerService } from './flower.service';

@Component({
  selector: 'app-b',
  standalone: true,
  template: `
    <div class="p-2 m-2 border-2 border-blue-400 border-dashed w-96">
      B (&#64;Host) - [{{ prefix }}]: {{ flower?.name }}
    </div>
  `,
  styles: `
    :host {
      display: block;
      @apply p-2 m-2 border-2 border-blue-600 rounded;
      width: 26rem;
    }
  `,
})
export class BComponent {
  @Input() prefix: string = 'B';

  constructor(@Host() @Optional() public flower: FlowerService | null) {
    console.log('------ Constructing B ------');
  }
}
